<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<script>
import lightenColor from '@/utils/colorRPG'

export default {
    name: "app",
    components: {},
    data() {
        return {}
    },
    methods: {
        setThemeColor(obj) {
            // 主题色
            let themeBackColor = lightenColor(obj.color1, 15);
            // 按钮
            let btnHover = lightenColor(obj.color1, 50);
            let btnColorHover = lightenColor(obj.color1, 23);
            let btnTextHoverColor = lightenColor(obj.color1, 35);
            let btnErrorTextHover = lightenColor(obj.color4, 25)
            // 提示色
            let successBackgrColor = lightenColor(obj.color2, 36);
            let warningBackgrColor = lightenColor(obj.color3, 36);
            let errorBackgrColor = lightenColor(obj.color4, 36);

            // 主题色
            document.documentElement.style.setProperty('--theme-color', themeBackColor);
            sessionStorage.setItem('linear-gradient', `linear-gradient(146deg, ${obj.color1} 0%, ${themeBackColor} 100%)`)
            // 主按钮
            document.documentElement.style.setProperty('--theme-btn-color-hover', btnColorHover);
            document.documentElement.style.setProperty('--theme-btn-hover', btnHover);
            // 文字按钮
            document.documentElement.style.setProperty('--theme-btn-color-text-hover', btnTextHoverColor);
            document.documentElement.style.setProperty('--theme-btn-color-error-text-hover', btnErrorTextHover);
            // 提示色
            document.documentElement.style.setProperty('--theme-success-backgr-color', successBackgrColor);
            document.documentElement.style.setProperty('--theme-warning-backgr-color', warningBackgrColor);
            document.documentElement.style.setProperty('--theme-error-backgr-color', errorBackgrColor);
        }
    },
    created() {
        let obj = {
            color1: "#087ABA",
            color2: "#67C23A",
            color3: "#E6A23C",
            color4: "#EE3F3F",
        }
        this.setThemeColor(obj)
       /* this.$api.getApplicationInfoByUuid({uuid: '7gob8szg6agve8nr7ufr'}).then(res => {
            this.setThemeColor(res)
        })*/
    }
};
</script>

<style lang="scss">
// 重置浏览器样式
@import "./style/reset.scss";
// 公用css、scss变量
@import "./style/common.scss";


.el-date-editor {
    width: auto;
}

//.el-button--primary {
//    background-color: #0082F2 !important;
//}
//
//.el-button--primary:hover {
//    background-color: #38a0fa !important;
//}

#app {
    height: 100%;
    width: 100%;
}

</style>
